<template>
  <div class="content">
    <div class="breadcrumb" :gutter="24">{{$t('recipe.equipment_formula')}}{{process}}
      <div class="btngroup">
        <el-button type="primary" size="small" @click="handleFormula()">{{$t('recipe.sel_recipe')}}</el-button>
        <el-button type="primary" size="small" @click="handleBind()" :disabled="haveEquip">{{$t('recipe.bind_equip')}}</el-button>
        <el-button type="warning" @click="unlinkDev()" size="small" :disabled="!haveEquip">{{$t('recipe.unbind_device')}}</el-button>
        <el-button type="primary" size="small" :disabled="isreadOnly"
          @click="handleSave('ruleForm')">{{ $t("common.preservation") }}</el-button>
      </div>
    </div>

    <div v-for="(item,index) in tableData" :key="index" class="tabBot">

      <div>
        <div>
          <el-tabs type="border-card" v-model="activeName" v-if="haveEquip">
            <template v-for="(item,index) in phaseList">
              <el-tab-pane :label="item.phaseDefineVo.name" :name="item.fid" :key="item.fid">
                <rightForm ref="rightForm" :stepObj="atoUnitPhase[index - otherPhaseCou]"
                  v-if="item.phaseDefineVo.sn == 'PH_ATO' && atoUnitPhase.length >0" :phaseDefineId="item.phaseDefineVo.fid"
                  :recipeInfo="recipeInfo" @sendAuto="sendAuto"
                  :setColuWidth="atoUnitPhase[index - otherPhaseCou] !=undefined? atoUnitPhase[index - otherPhaseCou].spare2:'7'"
                  :enumList="enumList">
                </rightForm>
                <phIfo v-else-if="item.phaseDefineVo.sn == 'PH_IFO'" :tdIndex="tdIndex-1"
                  :stepObj="unitPhaseList.find(ii=> ii.phaseCode == 'PH_IFO')" ref="phIfo">
                </phIfo>
                <!-- 信息提示 -->
                <phAdm v-else-if="item.phaseDefineVo.sn == 'PH_ADM'" :tdIndex="tdIndex-1"
                  :stepObj="unitPhaseList.find(ii=> ii.phaseCode == 'PH_ADM')" :isreadOnly="isreadOnly" ref="phAdm"></phAdm>
                <!-- 手动加料 -->
                <phOtm v-else-if="item.phaseDefineVo.sn == 'PH_OTM'" :tdIndex="tdIndex-1"
                  :stepObj="unitPhaseList.find(ii=> ii.phaseCode == 'PH_OTM')" ref="phOtm">
                </phOtm>
                <!-- 物料产出 -->
              </el-tab-pane>
            </template>
          </el-tabs>

        </div>
      </div>
    </div>

    <el-dialog v-dialogDrag :title="$t('recipe.bind_equip')" :visible.sync="isShowDialogBind" :close-on-click-modal="false"
      :width="screenWidth > 1024 ? '30%' : '60%'" class="isShowDialog" :before-close="handleClose">
      <el-form :model="ruleForm" label-width="85px" ref="ruleForm" size="small" :rules="rules" :hide-required-asterisk="true">
        <el-row :gutter="24">
          <el-col :xs="24">
            <el-form-item :label="$t('recipe.formula_name')" prop="fid" class="w-100">
              <el-select v-model="ruleForm.fid" remote filterable :remote-method="remoteMethod" placeholder="" disabled
                v-el-select-loadmore="loadMoreFun" clearable @clear="clearRecipe" @change="handleSelectFormula">
                <el-option v-for="(item,index) in formulaList" :key="index" :label="item.recipeName" :value="item.fid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24">
            <el-form-item :label="$t('recipe.material_code')">
              <el-input v-model="ruleForm.item" placeholder="" disabled clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('recipe.formula_status')">
              <el-input v-model="ruleForm.recipeStatus" placeholder="" disabled clearable></el-input>
            </el-form-item>
          </el-col> -->

          <el-col :xs="24">
            <el-form-item :label="$t('basic.equipment_type')" prop="initSchedEntId" class="selectClass">
              <el-select v-model="ruleForm.initSchedEntId" placeholder="" clearable filterable :remote-method="remoteMethodItemClass"
                v-el-select-loadmore="loadMoreItemClassFun" @clear="clearItemClass" @change="handleDeviceType">
                <el-option v-for="(item,index) in classIdList" :key="index" :label="item.className" :value="item.fid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('recipe.equipment')" class="selectClass" prop="equipmentId">
              <el-select v-model="ruleForm.equipmentId" filterable placeholder="" clearable @change="handleequipmentId">
                <el-option v-for="(item,index) in equipmentList" :key="index" :label="item.entName" :value="item.fid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- <el-col :xs="24">
            <el-form-item :label="$t('recipe.formula_description')">
              <el-input type="textarea" v-model="ruleForm.notes" placeholder="" disabled clearable></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" :loading="ruleFormLoading"
          @click="handleCreateBind('ruleForm')">{{$t('run.confirm')}}</el-button>
        <el-button @click="handleCloseBind()" size="small">{{ $t("common.cancel") }}</el-button>
        <!-- <el-button type="warning" @click="unlinkDev()" size="small"
          v-if="this.ruleForm.initSchedEntId !=''">{{$t('recipe.unbind_device')}}</el-button> -->
      </span>
    </el-dialog>

    <el-dialog v-dialogDrag :title="$t('recipe.sel_recipe')" :visible.sync="isShowDialog" :close-on-click-modal="false" width="58%"
      class="isShowDialog" :before-close="handleClose">
      <el-form :model="ruleForm" label-width="85px" ref="ruleForm" size="small" :rules="rulesJob" :hide-required-asterisk="true">
        <el-row :gutter="28">
          <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
            <el-form-item :label="$t('common.keyword')">
              <el-input v-model="ruleForm.keyword" clearable placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
            <el-form-item :label="$t('recipe.state')" label-width="40px" class="w-100">
              <el-select v-model="ruleForm.status" placeholder="" clearable>
                <el-option v-for="(item,index) in statusList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
            <el-form-item label-width="0px">
              <el-button type="primary" size="small" @click="handleSearch">{{ $t("common.query") }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="tableAuto tableAuto1">
        <el-table :data="formulaList" v-loading="formulaLoading" style="left:3% ;width: 95%" height="300px" @row-click="rowFormulaClick"
          :header-cell-style="{background:'#EAEBEC'}" ref="formulaTable" highlight-current-row>
          <el-table-column label="" width="50" align="center">
            <template slot-scope="scope">
              <div>
                <el-radio :label="scope.row.fid" v-model="formulaFid">&nbsp;</el-radio>
              </div>
            </template>
          </el-table-column>
          <el-table-column type="index" :label="$t('common.number')" width="80" align="center">
            <template slot-scope="scope">
              {{table_index1(scope.$index+1)}}
            </template>
          </el-table-column>
          <el-table-column :label="$t('recipe.formula_name')" show-overflow-tooltip prop="recipeName" width="150"></el-table-column>
          <el-table-column :label="$t('common.version')" show-overflow-tooltip prop="version" width="80"></el-table-column>
          <el-table-column :label="$t('recipe.material_code')" show-overflow-tooltip prop="item" width="100"></el-table-column>
          <el-table-column :label="$t('recipe.formula_status')" show-overflow-tooltip prop="item" width="100">
            <template slot-scope="scope">
              {{queryStatus(scope.row.recipeStatus)}}
            </template>
          </el-table-column>
          <el-table-column :label="$t('recipe.formula_description')" show-overflow-tooltip prop="notes"></el-table-column>
        </el-table>

      </div>
      <div class="pagination-area" style="padding:10px 0">
        <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :page-sizes="[10, 20, 50, 100]"
          :page-size="formulaPage.pageSize" :current-page="formulaPage.pageNum" layout="total, sizes, prev, pager, next, jumper"
          :total="formulaPage.total">
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" :loading="ruleFormLoading"
          @click="handleCreate('ruleForm')">{{$t('run.confirm')}}</el-button>
        <el-button @click="handleClose()" size="small">{{ $t("common.cancel") }}</el-button>
      </span>
    </el-dialog>

    <bg ref="bg" v-if="!process"></bg>
  </div>

</template>

<script>
import { scheduling } from "@/api/scheduling"
import { formula } from "@/api/formula"
import { configure } from "@/api/configure"
import rightForm from "./template/phAto.vue"
import phIfo from "./template/phIfo.vue"
import phAdm from "./template/phAdm.vue";
import phOtm from "./template/phOtm.vue"
import bg from "./bg.vue"
export default {
  components: {
    rightForm,
    phIfo,
    phAdm,
    phOtm,
    bg
  },
  data () {

    return {
      screenWidth: document.body.clientWidth,
      height: "calc(100vh - 171px)",
      isShowDialog: false,
      isShowDialogBind: false,
      tableLoading: false,
      ruleForm: {
        fid: "",
        notes: "",
        item: "",
        status: '',
        recipeStatus: "",
        initSchedEntId: '',
        equipmentId: '',
      },
      ruleFormJob: {
        jobDesc: "",
        initSchedEntId: "",
        seqNo: "",
        nextJob: "",
        equipmentId: "",
        firstJob: "",
        finalJob: "",
        autoStart: 0,
        delayTime: 0,
      },
      formData: {
        trainId: ""
      },
      radioId: {},
      radioFid: "",
      tableData: [],
      formulaList: [],
      currObj: {},
      rules: {
        fid: [{ required: true, message: this.$t('dialog.recipe_no_empty'), trigger: 'change' }],
      },

      formulaPage: {
        pageNum: 1,
        pageSize: 10,
        keyword: ""
      },
      ruleFormLoading: false,
      isreadOnly: true,
      isTrainVo: "",
      pager: {
        pageNum: 1,
        pageSize: 20,
        total: 0
      },
      serialNum: [],
      deviceList: [],
      process: "",
      itemKey: "",
      tdIndex: 0,
      stepObj: {},
      recipeInfo: {},
      title: "添加",
      isShowAdd: false,
      keyEntName: "",
      classIdList: [],
      equipmentList: [],
      zyloading: false,
      loading: false,
      pageGroud: {
        pageNum: 1,
        pageSize: 100,
        keyword: ""
      }, recipePager: {
        field: 'fCreatorTime',
        order: 'DESC',
      },
      count: 0,
      curRow: {},
      activeName: 'item1',
      phaseList: [],
      unitPhaseList: [],
      atoUnitPhase: [],
      otherPhaseCou: 0,
      sendAutoCount: 0,
      autoParam: [],
      addPhaseCount: 1,
      curOperId: '',
      statusList: [{
        label: "编辑",
        value: "1"
      }, {
        label: this.$t('common.examine'),
        value: "2"
      }, {
        label: this.$t('common.approval'),
        value: "3"
      }, {
        label: "启用",
        value: "4"
      }, {
        label: this.$t('common.abandoned'),
        value: "5"
      }, {
        label: "实验",
        value: "6"
      }],
      formulaLoading: false,
      haveEquip: false,
    }
  },
  watch: {
    screenWidth (val) {
      this.screenWidth = Number(val)
    }
  },
  mounted () {
    const that = this
    window.addEventListener('resize', function () {
      that.screenWidth = document.body.offsetWidth;
    })
  },
  async created () {
    this.getEnumList()
    this.getTbrecipeList()
    this.getEquipmentClassList()
    this.getEquipmentList()
  },
  methods: {
    clearItemClass () {
      this.pagerdev.keyword = ""
      this.pagerdev.pageNum = 1
      this.classIdList = []
      this.getEquipmentClassList()
    },
    handleequipmentId () {
      this.$forceUpdate()
    },
    handleDeviceType () {
      this.ruleForm.equipmentId = ''
      this.getEquipmentList()
    },
    getEquipmentClassList () {
      const param = {
        page: 1,
        size: 999,
      }
      configure.getEquipmentClassList(param).then(res => {
        if (res.code == 200) {
          this.classIdList = res.data.rows
        }
      }).catch(e => {
      })

    },
    //下拉加载更多设备定义
    loadMoreItemClassFun () {
      this.pagerdev.pageNum++
      this.getEquipmentClassList()
    },
    //远程搜索设备定义
    remoteMethodItemClass (keyword) {
      this.pagerdev.keyword = keyword.trim();
      this.pagerdev.pageNum = 1
      // setTimeout(() => {
      //   this.classIdList = []
      //   this.getEquipmentClassList()
      // }, 200)
    },
    //选择配方处理
    rowFormulaClick (row) {
      this.formulaFid = row.fid
      this.$refs.formulaTable.setCurrentRow(row);
    },
    table_index1 (index) {
      return (this.formulaPage.pageNum - 1) * this.formulaPage.pageSize + index
    },
    getEnumList () {
      const param = {
        page: 0,
        size: 999,
        field: 'orderBy',
        order: 'ASC',
      }

      configure.getEnumsListOrderby(param).then(res => {
        if (res.code == 200) {
          this.enumList = res.data.rows
        }
      })
    },
    sortPhase () {
      let newAutoPhase = []
      this.phaseList.forEach(ii => {
        if (ii.phaseDefineVo.type == 1) {
          let cur = this.atoUnitPhase.find(jj => jj.phaseDesc == ii.phaseDefineVo.name)
          newAutoPhase.push(cur)
        }
      })
      this.atoUnitPhase = newAutoPhase
    },
    handleFormula () {
      this.isShowDialog = true
    },
    handleClose () {
      this.isShowDialog = false
    },
    handleCloseBind () {
      this.isShowDialogBind = false
    },
    handleBind () {
      this.isShowDialogBind = true
      this.ruleForm.fid = this.formulaFid
    },
    unlinkDev () {
      //删除已存在的配方 job关联的设备类和设备
      formula.operationRemove(this.curOperId).then(res => {

      })
      this.ruleForm.equipmentId = ''
      this.ruleForm.initSchedEntId = ''
      this.haveEquip = false

      this.unitPhaseList = []
      this.phaseList = []
      // this.getTbrecipeList()
    },
    //获取配方名称列表
    getTbrecipeList () {
      const param = {
        page: this.formulaPage.pageNum,
        size: this.formulaPage.pageSize,
        recipeName: this.formulaPage.keyword,
        recipeStatus: this.ruleForm.status,
        field: this.recipePager.field,
        order: this.recipePager.order,
        recipeType: 2,
        // isRecipeStatus:[1] //只能选择编辑的配方
      }
      this.formulaLoading = true
      scheduling.getTbrecipeList(param).then(res => {
        if (res.code == 200) {
          // this.formulaList = [...this.formulaList, ...res.data.rows]

          this.formulaList = res.data.rows
          this.formulaPage.total = res.data.total
        }
        this.formulaLoading = false
      })
    },
    //配方查询
    handleSearch () {
      this.formulaPage.pageNum = 1
      this.formulaFid = ''
      this.getTbrecipeList()
    },
    handleSizeChange1 (val) {
      this.formulaPage.pageNum = 1
      this.formulaPage.pageSize = val
      this.getTbrecipeList()
    },
    handleCurrentChange1 (val) {
      this.formulaPage.pageNum = val
      this.getTbrecipeList()
    },
    async handleCreate (formName) {
      if (!this.formulaFid) {
        this.$message.error('请选择配方');
        return
      }

      this.$refs[formName].validate(async (valid) => {
        // if (valid) {
        this.formData.trainId = ""
        this.isTrainVo = ""
        const item = this.formulaList.find(item => item.fid == this.formulaFid)
        this.recipeId = item.fid
        this.isreadOnly = item.recipeStatus == 1 ? false : true //除了编辑状态 其余的都不能操作
        if (item.trainVo) {
          this.formData.trainId = item.trainVo.fid
          this.isTrainVo = item.trainVo.fid
        } else {
          this.formData.trainId = ""
          this.isTrainVo = ""
        }

        this.process = " > " + item.recipeName + " - " + this.queryStatus(item.recipeStatus)
        this.curOperId = item.operationVos.length > 0 ? item.operationVos[0].fid : ''

        this.isShowDialog = false
        //已经绑定过设备的，直接查询phase

        this.otherPhaseCou = 0
        this.unitPhaseList = []
        this.phaseList = []
        if (item.operationVos.length > 0) {
          this.equipmentId = item.operationVos[0].equipmentId

          this.haveEquip = true
          this.getUnitPhaseList()
        } else {
          this.haveEquip = false
        }

        //   }
      })
    },
    handleCreateBind () {
      // await this.getUnitPhaseList()
      this.otherPhaseCou = 0
      this.unitPhaseList = []
      this.phaseList = []
      this.equipmentId = this.ruleForm.equipmentId
      this.haveEquip = true
      this.getUnitPhaseList()
      this.isShowDialogBind = false
    },
    getDataList () {
      let item = this.formulaList.find(item => item.fid == this.ruleForm.fid)
      const param = {
        recipeId: this.recipeId,
      }
      formula.operationList1(param).then(res => {
        this.tableLoading = false
        this.ruleFormLoading = false
        if (res.code == 200) {
          this.tableData = res.data.rows
          this.itemKey = new Date().getTime()
          this.serialNum = []
          this.deviceList = []
          this.pager.total = res.data.total
          try {

            this.recipeInfo.recipeName = item.recipeName
            // this.process = " > " + item.recipeName + " - " + this.queryStatus(item.recipeStatus)
          } catch (e) { }

          if (this.tableData.length == 0) {
            const param = {
              jobDesc: "单元作业",
              firstJob: '',
              finalJob: '',
              initSchedEntId: this.ruleForm.initSchedEntId,
              seqNo: '',
              equipmentId: this.ruleForm.equipmentId,
              recipeId: this.recipeId
            }
            formula.operationAdd(param, '添加').then(res => {
              if (res.code == 200) {
                this.itemKey = new Date().getTime()

                this.getDataList()
              } else {
                this.$message.error(res.msg);
              }
            })
          } else {
            this.addPhases()
          }
          this.isShowDialog = false
          this.recipeInfo.recipeId = this.recipeId
        }
      })
    },
    handleSelectFormula (val) {
      const item = this.formulaList.find(el => el.fid == val)
      this.ruleForm.item = item.item
      this.ruleForm.notes = item.notes
      this.ruleForm.recipeStatus = this.queryStatus(item.recipeStatus)

      this.ruleForm.initSchedEntId = item.operationVos.length > 0 ? item.operationVos[0].equipmentClassVo.fid : ''
      this.ruleForm.equipmentId = item.operationVos.length > 0 ? item.operationVos[0].equipmentId : ''




    },
    addPhases () {
      return new Promise(async (resolve, reject) => {
        //从oper查询phase，赋值给子组件
        if (this.tableData[0].phaseVos != null && this.tableData[0].phaseVos.length > 0) {
          this.atoUnitPhase = []
          this.tableData[0].phaseVos.forEach(ii => {

            this.unitPhaseList.push(ii)
            if (ii.phaseCode == 'PH_ATO') {

              this.atoUnitPhase.push(ii)
            }
          })
          this.sortPhase()
          resolve(false)
          return
        } else {

          this.phaseList.forEach(ii => {
            this.phaseAdd(0, 1, ii.phaseDefineVo.sn, ii.phaseDefineVo.type, ii.phaseDefineVo.name, ii.phaseDefineVo.type, ii.spare2)
          })

        }
      })
    },
    // 新增阶段信息
    phaseAdd (trIndex, tdIndex, title, modeId, text, type, coluCount) {

      return new Promise((resolve, reject) => {
        const param = {
          isActive: 0,
          operationId: this.tableData[0].fid,
          phaseCode: title,
          phaseDesc: text,
          seqNo: tdIndex,
          mode: modeId,
          type: type || 0,
          spare1: 'onlyUnit',
          spare2: coluCount,
          serialNo: 16,
        }

        this.atoUnitPhase = []
        formula.phaseAddInfo(param).then(res => {
          if (res.code == 200) {
            const index = 0

            this.tableData[index].phaseVos = this.tableData[index].phaseVos ? this.tableData[index].phaseVos : []
            this.tableData[index].phaseVos.push(res.data)
            let stepObj = Object.assign({}, res.data)
            stepObj.fid = stepObj.fId
            this.unitPhaseList.push(stepObj)

            if (stepObj.phaseCode == 'PH_ATO') {
              this.atoUnitPhase.push(stepObj)
            }
            this.addPhaseCount++
            if (this.phaseList.length + 1 == this.addPhaseCount) {
              this.sortPhase()
            }
            resolve(stepObj)
          } else {
            resolve(false)
            this.$message.error(res.msg);
          }
        }).catch(e => {
        })
        this.trIndex = trIndex
        this.tdIndex = tdIndex
      })

    },

    loadMoreFun () {
      this.formulaPage.pageNum++
      this.getTbrecipeList()
    },
    //远程搜索配方名称
    remoteMethod (keyword) {
      this.formulaPage.keyword = keyword.trim();
      this.formulaPage.pageNum = 1
      setTimeout(() => {
        this.formulaList = []
        this.getTbrecipeList()
      }, 200)
    },
    clearRecipe () {
      this.formulaPage.keyword = ""
      this.formulaPage.pageNum = 1
      this.formulaList = []
      this.getTbrecipeList()
    },
    getEquipmentList () {
      const param = {
        classId: this.ruleForm.initSchedEntId,
        size: 99999
      }
      this.equipmentList = []
      configure.getEquipmentList(param).then(res => {
        if (res.code == 200) {
          // let list = res.data.rows.filter(item => {
          //   item.equipmentClassVo = item.equipmentClassVo ? item.equipmentClassVo : {}
          //   let trains = new Array()
          //   if (item.trainVos != null) {
          //     trains = item.trainVos.map(x => { return x.fid })
          //     return item.equipmentClassVo.fid == this.ruleFormJob.initSchedEntId && trains.includes(this.formData.trainId)
          //   }          
          // })
          // list.forEach(item => {
          //     if(item.trainVos){
          //         const index = item.trainVos.findIndex(el => el.fid == this.isTrainVo)
          //         if(index > -1){
          //             item.isTrainVo = true
          //         }
          //     }
          // })
          this.equipmentList = res.data.rows
          // this.equipmentList = list.filter(item => {
          //     return item.isTrainVo
          // })
          // this.equipmentList = res.data.rows
          // this.equipmentId = this.equipmentList[0].fid
        }
      })
    },
    queryStatus (status) {
      switch (status) {
        case 1:
          return "编辑"
        case 2:
          return this.$t('common.examine')
        case 3:
          return this.$t('common.approval')
        case 4:
          return "启用"
        case 5:
          return this.$t('common.abandoned')
        case 6:
          return "实验"
      }
    },
    getUnitPhaseList () {
      const param = {
        'unitId': this.equipmentId,
        field: 'orderBy',
        order: 'ASC',

      }
      configure.getUnitPhaseDefineList(param).then(res => {
        this.phaseList = []
        let rows = res.data.rows

        let phaseIfo = rows.find(ii => ii.phaseDefineVo.type == 3)
        if (phaseIfo != undefined) {
          this.phaseList.push(phaseIfo)
          this.otherPhaseCou++
        }

        let phaseAdm = rows.find(ii => ii.phaseDefineVo.type == 4)
        if (phaseAdm != undefined) {
          this.otherPhaseCou++
          this.phaseList.push(phaseAdm)
        }

        let phaseOtm = rows.find(ii => ii.phaseDefineVo.type == 6)
        if (phaseOtm != undefined) {
          this.otherPhaseCou++
          this.phaseList.push(phaseOtm)
        }

        rows.forEach(ii => {
          if (ii.phaseDefineVo.type == 1) {
            this.phaseList.push(ii)
          }
        })

        if (phaseIfo != null)
          this.activeName = phaseIfo.fid
        else this.activeName = rows[0].fid

        this.getDataList()
      })
    },
    sendAuto (val) {
      this.autoParam = this.autoParam.concat(val)
      this.sendAutoCount++
      if (this.sendAutoCount == this.atoUnitPhase.length) {

        let title = '新增'
        if (this.autoParam[0].fid != '') title = '编辑'

        formula.phaseAutoAdd(this.autoParam, title).then(res => {
          this.loading = false
          if (res.code == 200) {
            this.$refs.rightForm.forEach(ii => {
              ii.phaseAutoList()
            })
          } else {
          }
        })
        this.sendAutoCount = 0
        this.autoParam = []
      }
    },
    handleSave (formName) {
      let param = []
      this.$refs.rightForm.forEach(ii => {
        ii.handleSubmit(formName)
      })
      if (this.phaseList.findIndex(ii => ii.phaseDefineVo.sn == 'PH_IFO') > -1) {
        this.$refs.phIfo[0].handleConfirm(formName)
      }
      if (this.phaseList.findIndex(ii => ii.phaseDefineVo.sn == 'PH_ADM') > -1)
        this.$refs.phAdm[0].handleConfirmStorage(formName)
      if (this.phaseList.findIndex(ii => ii.phaseDefineVo.sn == 'PH_OTM') > -1) {
        this.$refs.phOtm[0].handleConfirm(formName)
      }
      this.$message({ duration: 1000, type: 'success', message: '保存成功!' });
    },

  }
}
</script>

<style scoped>
.btngroup {
  float: right;
  margin-top: 30px;
}
.title {
  line-height: 5px;
  background: #bbb6c793;
  color: #fff;
  padding: 0 15px;
  font-size: 14px;
  margin-top: 10px;
}
.zhedie {
  float: right;
  line-height: 35px;
  font-size: 18px;
  cursor: pointer;
}
.StepBox {
  display: flex;
}
.StepBox .left {
  width: 130px;
  border-right: 1px solid #e4e4e4;
  height: 100%;
}
.StepBox .right {
  flex: 1;
  padding-left: 10px;
}
/* .tableAuto >>> .el-table__row {
  background: none !important;
}
.tableAuto >>> .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: none;
}
.tableAuto >>> .el-table__row td {
  padding: 8px 0;
}
.tableAuto >>> .el-table thead {
  display: none;
} */
thead {
  background: #f9f9f9;
}
thead td {
  font-weight: bold;
}
.table_form td,
.table_form th {
  border-right: 1px solid #dedfe3;
  border-bottom: 1px solid #dedfe3;
  text-align: center;
  min-width: 30px;
  padding: 6px 5px;
  white-space: nowrap; /* 禁止超出自动换行 */
}
.tableAuto >>> .el-table__expanded-cell {
  padding: 0px 0;
}
.tableAuto >>> .el-table__body-wrapper {
  overflow: auto;
}
.tableAuto1 >>> .el-table__row td {
  padding: 5px 0;
}
.selectClass >>> .el-select {
  width: 100%;
}

.tabBot {
  margin-top: 30px;
}
</style>